<template>
  <div class="col">
    <div class="row_center mt ml pd">
      <el-button @click="onClickLinkageClear" type="info">清空轨迹记录</el-button>
      <el-button @click="onClcikLinkageAdd" type="warning">添加轨迹</el-button>
      <label class="ml">轨迹数量：{{ ctx.posList.length }}</label>
    </div>
    <div class="row_center mt ml pd">
      <label>轨迹名称:</label>
      <el-input v-model="ctx.linkageName" style="width: 80px;" />
      <label class="ml">夹爪位置:</label>
      <el-input v-model="ctx.gripper_pos" style="width: 80px;" />
      <label class="ml">夹爪速度:</label>
      <el-input v-model="ctx.gripper_speed" style="width: 80px;" />
      <label class="ml">夹爪力矩:</label>
      <el-input v-model="ctx.gripper_tor" style="width: 80px;" />
    </div>
    <div class="row_center ml mt pd">
      <el-button @click="onClickTestLinkage" class="ml" type="primary">测试轨迹</el-button>
      <el-button @click="onClickSaveLinkage" class="ml" type="warning">保存轨迹</el-button>
      <el-button @click="onClickGetLinkage" class="ml" type="primary">获取轨迹</el-button>
      <label class="ml">轨迹数量:{{ ctx.runLinkageList.length }}</label>
      <el-checkbox class="ml" v-model="ctx.runCycle" label="循环运行"></el-checkbox>
      <el-button class="ml" @click="onClickRunLinkageList">多轨迹运行</el-button>
      <el-button class="ml" @click="onClickClearLinkageList">清空多轨迹</el-button>
    </div>
    <div class="row mt ml" style="flex-wrap: wrap;">
      <div class="card pd2 col mt ml" v-for="(item, index) in ctx.linkageList" :key="index">
        <div class="row_kv">
          <label>{{ item.name }}</label>
          <label class="ml">{{ item.pos_list.length }}</label>
        </div>
        <div class="row">
          <el-button @click="runLinkage(item)" type="primary" class="mt">运行轨迹</el-button>
          <el-button @click="onClickDelLinkage(item.name)" type="info" class="mt">删除轨迹</el-button>
        </div>
        <div class="row mt">
          <el-button type="warning" @click="onClickLinkageAppend(item)">添加</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { Gripper, Linkage, Pos } from '../robot/model';
import { dialog } from '../utils/dialog';
import service from '../robot/service';
import store from '../robot/store';


interface Ctx {
  linkageName: string,
  gripper_pos: string,
  gripper_speed: string,
  gripper_tor: string,
  posList: Pos[],
  linkageList: Linkage[],
  runLinkageList: Linkage[],
  runCycle: boolean,
}

const ctx = reactive<Ctx>({
  linkageName: '',
  gripper_pos: '100',
  gripper_speed: '100',
  gripper_tor: '100',
  posList: [],
  linkageList: [],
  runLinkageList: [],
  runCycle: false,
});

function onClickLinkageClear() {
  ctx.posList = [];
}

function onClcikLinkageAdd() {
  let p = new Pos();
  ctx.posList.push(p);
}

function onClickLinkageAppend(linkage: Linkage) {
  ctx.runLinkageList.push(linkage);
}

function onClickClearLinkageList() {
  ctx.runLinkageList = [];
}

async function runLinkage(linkage: Linkage) {
  try {
    await service.moveJs(linkage.pos_list);
    await service.moveGripper(linkage.gripper.pos, linkage.gripper.speed, linkage.gripper.tor);
  } catch (msg) {
    dialog.err(msg);
  }
}

async function onClickRunLinkageList() {

  if (ctx.runLinkageList.length == 0) {
    dialog.err('运行列表没有数据')
    return;
  }

  try {
    while (true) {
      for (let linkage of ctx.runLinkageList) {
        await service.moveJs(linkage.pos_list);
        await service.moveGripper(linkage.gripper.pos, linkage.gripper.speed, linkage.gripper.tor);
      }
      if (!ctx.runCycle) {
        break;
      }
    }
  } catch (msg) {
    dialog.err(msg);
  }


}

function getGripper(): Gripper {
  return {
    pos: parseInt(ctx.gripper_pos),
    speed: parseInt(ctx.gripper_speed),
    tor: parseInt(ctx.gripper_tor),
  };
}

async function onClickTestLinkage() {
  let gripper = getGripper();
  let posList = ctx.posList;
  if (posList.length == 0) {
    dialog.err('没有记录轨迹信息');
    return;
  }
  await runLinkage({
    name: '测试',
    pos_list: posList,
    gripper
  });
}

async function onClickDelLinkage(name: string) {
  try {
    await store.delLinkage(name);
    await onClickGetLinkage();
  } catch (msg) {
    dialog.err(msg);
  }
}

async function onClickGetLinkage() {
  try {
    ctx.linkageList = await store.getLinkage();
  } catch (msg) {
    dialog.err(msg);
  }
}

async function onClickSaveLinkage() {
  try {
    if (ctx.linkageName.length == 0) {
      dialog.err('请输入轨迹名称');
      return;
    }
    if (ctx.posList.length == 0) {
      dialog.err('没有轨迹信息');
      return;
    }
    let gripper = getGripper();
    await store.saveLinkage({
      name: ctx.linkageName,
      pos_list: ctx.posList,
      gripper
    });
    await onClickGetLinkage();
  } catch (msg) {
    dialog.err(msg);
  }
}

onClickGetLinkage();

</script>
